<template>
  <div class="container bg-gray">
    <div v-if="errmsg" class="errmsg">
        {{errmsg}}
    </div>
    <div v-else>
 <div class="form-items fz30">
      <div class="form-item rel flex border-b" @click="showCarBand">
        <div class="txt333">
          开票类型：
        </div>
        <div class="flex-con txt999">
          {{purchaseTypeData[formData.purchaseType]||'请选择发票类型'}}
          <select class="full-opacity" v-model="formData.purchaseType">
            <option :key="index" :value="index" v-for="(item,index) in purchaseTypeData">{{item}}</option>
          </select>
        </div>
        <img src="../../assets/imgs/other/gt@2x.png" alt="" class="gt" />
      </div>
      <label class="form-item flex border-b">
        <div class="txt333">
          发票抬头：
        </div>
        <div class="flex-con txt999">
          <input type="text" placeholder="请输入发票抬头（必填）" v-model="formData.invoice" class="full-txt-input">
        </div>
      </label>
      <label class="form-item flex border-b" v-if="formData.purchaseType==1">
        <div class="txt333">
          纳税人识别号：
        </div>
        <div class="flex-con txt999">
          <input type="text" placeholder="请输入纳税人识别号（必填）" v-model="formData.purchaseTaxid" class="full-txt-input">
        </div>
      </label>
      <label class="form-item flex border-b">
        <div class="txt333">
          地址：
        </div>
        <div class="flex-con txt999">
          <input type="text" placeholder="请输入地址（选填）" v-model="formData.purchaseAddress" class="full-txt-input">
        </div>
      </label>
      <label class="form-item flex border-b">
        <div class="txt333">
          电话：
        </div>
        <div class="flex-con txt999">
          <input type="tel" placeholder="请输入电话（选填）" v-model="formData.purchaseTel" class="full-txt-input">
        </div>
      </label>
      <label class="form-item flex border-b">
        <div class="txt333">
          开户行：
        </div>
        <div class="flex-con txt999">
          <input type="text" placeholder="请输入开户行（选填）" v-model="formData.purchaseOpeningBank" class="full-txt-input">
        </div>
      </label>
      <label class="form-item flex border-b">
        <div class="txt333">
          账号：
        </div>
        <div class="flex-con txt999">
          <input type="tel" placeholder="请输入开户行账号（选填）" v-model="formData.purchaseAccount" class="full-txt-input">
        </div>
      </label>


    </div>
    <div class="btn-areas">
      <div class="btn-submit" @click="doSubmit">保存</div>
    </div>
    </div>
   
     
  </div>
</template>
<script>
import { isVehicleNumber } from "../../utils/common";
import { purchaseTypeData } from "../../config/constants";
// import {isValidMobilePhone} from '../../utils/common';
/**
   *  "05": "银行卡",
    "03": "中油BP畅行卡",
    "08": "中油BP畅行车主卡",
    "06": "其他",
   */
import { oilTypes, carTypes, provinceShortName } from "../../config/constants";
export default {
  data() {
    return {
      purchaseTypeData,
      formData: {},
      errmsg: ""
    };
  },
  created() {
    let id = this.$route.query.id;
    if (id) {
      this.showLoading();
      this.$post("/api/user/invoice/detail", {
        id
      })
        .then(data => {
          this.formData = data;
          this.formData.purchaseType = data.purchaseType ? 1 : 0;
          this.hideLoading();
        })
        .catch(_ => {
          this.hideLoading();
          if (_.errcode == 301) {
          } else {
            this.errmsg = _.errmsg;
          }
        });
    }
  },
  methods: {
    onSelectBrand(brand) {
      this.formData.carBrandId = brand.id;
      this.formData.carBrandName = brand.brandName;
      this.formData.logo = brand.logo;
      this.selectCarBrand = false;
    },
    selectProvinceShortName(tag) {
      this.formData.PLATE_NUMBER_1 = tag;
      this.isShowingShortName = false;
    },
    showProvinceShortNameSelect() {
      this.isShowingShortName = true;
    },
    doSubmit() {
      if (this.formData.purchaseType === "") {
        this.$toast("请选择开票类型");
        return;
      }
      if (!this.formData.invoice) {
        this.$toast("请输入发票抬头");
        return;
      }
      if (this.formData.purchaseType == 1 && !this.formData.purchaseTaxid) {
        this.$toast("请输入纳税人识别号");
        return;
      }

      this.showLoading();
      let url = "/api/user/invoice/modify";
      let id = this.$route.query.id;
      if (!id) {
        url = "/api/user/invoice/add";
      }
      this.$post(url, this.formData)
        .then(el => {
          this.hideLoading();
          this.$toast("提交成功");
          this.$router.go(-1);
        })
        .catch(_ => {
          this.hideLoading();
        });
    },
    showCarBand() {
      this.selectCarBrand = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.brandpop {
  width: 8rem;
}

.carlicense-masker {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  text-align: center;
  top: 0;
  background-color: rgba(0, 0, 0, 0.2);
  img {
    width: 8rem;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
  }
}

.mt-cell-cc /deep/ .mint-cell-value {
  width: auto;
}

.btn-areas {
  padding-top: 0.7867rem;
  text-align: center;
  .btn-submit {
    display: inline-block;
    width: 8.4667rem;
    height: 1.0667rem;
    line-height: 1.0667rem;
    color: white;
    font-size: 0.4267rem;
    background-image: url("../../assets/imgs/other/btn.png");
    background-size: 100% 100%;
    background-position: left top;
  }
}

.tags {
  width: 8.72rem;
  padding: 0.32rem 0.32rem 0 0.32rem;
  box-sizing: border-box;

  overflow: hidden;
  background-color: #ffffff;
  .tag {
    width: 1.3333rem;
    height: 0.7733rem;
    line-height: 0.7733rem;
    background-color: #9b9b9b;
    float: left;
    border-radius: 0.1467rem;
    font-size: 0.4rem;
    color: #ffffff;
    text-align: center;
    margin-bottom: 0.3067rem;
    margin-right: 0.3333rem;
  }
  .tag:nth-child(5n) {
    margin-right: 0;
  }
}

.question-icon {
  width: 0.6667rem;
  height: 0.6667rem;
}

.form-items {
  padding-top: 0.4rem;

  .form-item {
    padding: 0.4133rem 0.4667rem;
    background-color: #fff;
    .txt333 {
      // width: 3.1867rem;
    }
    input {
      width: 100%;
      border: none;
      outline: none;
    }
  }
}

.down-icon {
  width: 0.28rem;
  height: 0.1467rem;
}

.unit {
  width: 1.48rem;
  height: 0.84rem;
  line-height: 0.84rem;
  font-size: 0.4rem;
  text-align: center;
  background-color: #e2e2e2;
  border-radius: 0.0933rem;
}
</style>
